<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
<div class="panel admin-panel" style="width: 100%">
    <div class="panel-head"><strong class="icon-reorder"> 收藏管理</strong></div>

        <table class="table table-hover text-center" th:if="${groups.size()>0}">
            <tr>
                <td width="50%" align="left"><span>当前收藏夹：<span th:text="${groupname}"></span> <i id="updateGroupName" style="color: #0ab2d2" class="layui-icon">&#xe642;</i></span>
                </td>
                <td width="50%" align="right"><span id="updateGroup" style="color: #0ab2d2"><span>批量移动</span> <i class="layui-icon">&#xe691;</i></span></td>
            </tr>
        </table>
        <table class="table table-hover text-center" th:if="${groups.size()==0}">
            <tr>
               <th>目前暂无收藏</th>
            </tr>
        </table>

    <form id="form" class="layui-form layui-form-pane">
        <div>
            <div style="width: 20%;float: left" >
                <div class="layui-form-item" >
                    <div th:each="group:${groups}">
                        <a th:href="@{/collect/articleCollect}+'?groupname='+${group}" class="layui-form-label" style="text-align: left;width: 100%;background-color: #ffffff"><font th:text="${group}"></font><i th:if="${groupname==group}" style="float: right" class="layui-icon">&#xe605;</i>
                        </a>
                    </div>
                 </div>
            </div>
            <div style="width: 80%;float: left">
                <div th:each="chart:${charts}" class="rightGroup">
                    <label	class="layui-form-label" style="text-align: left;width: 99%;margin-top:5px;margin-left:1%;background-color: #ffffff">
                        <font th:text="${chart.getTitle()}"></font>
                        <i class="layui-icon" style="float: right;color: #0ab2d2">&#xe658;</i>
                        <input type="hidden" th:value="${chart.getAid()}">
                        <input type="hidden" th:value="${chart.getBauthor()}">
                    </label>
                </div>
            </div>
       </div>
    </form>
</div>

</body>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/js/pintuer.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">
    layui.use('form', function() {
        var form = layui.form;
        form.render();
    });
    layui.use('layer',function(){
        var layer=layui.layer;
    });
    $(function () {
        //文件夹选择
        $(".layui-form-item a").mouseover(function () {
            $(this).css("background-color","#FBFBFB").css("cursor","pointer")
        }).mouseout(function () {
            $(this).css("background-color","#ffffff")
        });
        //文件凸显 等
        $(".rightGroup label").mouseover(function () {
            $(this).css("border-color","#009688").css("-webkit-box-shadow"," 2px 2px 10px #909090");
           /* $(this).animate({"top":"-10"});*/
        }).mouseout(function () {
            $(this).css("border-color","#e6e6e6").css("-webkit-box-shadow","null");
           /* $(this).animate({"top":"0"});*/
        });
        //浏览文件
        $(".rightGroup label font").mouseover(function () {
            $(this).css("color","#0ab2d2").css("cursor","pointer")
        }).mouseout(function () {
            $(this).css("color","black").css("-webkit-box-shadow","null");
            /* $(this).animate({"top":"0"});*/
        }).click(function () {
         /* console.log($(this).siblings().next().val())*/
            window.open('/show/content/'+ $(this).siblings().next().val())
        })
        //取消收藏
        $(".rightGroup label i").mouseover(function () {
            $(this).css("cursor","pointer")
        }).mouseout(function () {
          /*  $(this).css("color","black").css("-webkit-box-shadow","null");*/
            /* $(this).animate({"top":"0"});*/
        }).click(function () {
           /* console.log($(this).siblings().next().next().val())*/
           /*  console.log($(this).siblings().next().next().next().val())*/
           var bauthor=$(this).siblings().next().next().next().val();
           var aid=$(this).siblings().next().next().val();
            $.ajax({
                type:"POST",
                url:"/show/zan/"+bauthor+'/'+aid+'/'+1,
                async: false,
                success:function(data){
                    console.log(data)
                    if (data==1){
                        window.location.reload();//刷
                    }
                }
            });
        })
        //修改选中的组名
        $("#updateGroupName").mouseover(function () {
            $(this).css("cursor","pointer")
        }).click(function () {
            var groupname=[[${groupname}]];
            layer.prompt({title: '输入新文件夹名', formType: 3}, function(text, index){
                if (text.length<2||text.length>20||text==''){
                    layer.msg('2~20字：',{icon: 0});
                }else {
                    var code;
                    $.ajax({
                        type:"POST",
                        url:"/show/updateGroupName/"+groupname+'/'+text,
                        async: false,
                        success:function(data){
                            console.log(data);
                            code=data;
                        }
                    });
                    if (code==1){
                        layer.close(index);
                        layer.msg(groupname+'以修改为：'+text,{icon: 1});
                        setTimeout(function () {
                            window.location.href="/collect/articleCollect?groupname="+text;
                        }, 1000);
                    }else {
                        layer.msg('修改失败：',{icon: 2});
                    }
                }

            });
        });
        //批量移动
        $("#updateGroup").mouseover(function () {
            $(this).css("cursor","pointer")
        }).click(function () {
            var groupname=[[${groupname}]];
            layer.open({
                type: 2,
                area: ['500px', '450px'],
                title:'批量修改',
                resize: false,
                shadeClose: true, //点击遮罩关闭
                content: [[@{/collect/updateCollect/}]]+groupname
            });
        });
    });
</script>

</html>